<template>
  <div class="Strategy_Card">
    <h2 class="name">{{cardInfo.name}}</h2>
    <div class="chart" ref="echart"></div>
    <ul class="detail">
      <li>
        <p class="name">实盘收益</p>
        <p class="value">
          <span class="red">{{cardInfo.realIncome}}%</span>
        </p>
      </li>
      <li>
        <p class="name">实盘天数</p>
        <p class="value">{{cardInfo.realDays}}%</p>
      </li>
      <li>
        <p class="name">今日收益</p>
        <p class="value">{{cardInfo.todayIncome}}</p>
      </li>
    </ul>
    <div class="footer">
      <p>
        <span>{{cardInfo.price}}</span> 元/月
      </p>
      <el-button type="primary" plain @click="$router.push({path:'/Shop_Detail'})">查看详情</el-button>
    </div>
  </div>
</template>
<script>
// import { constants } from 'crypto';
var echarts = require("echarts");
export default {
  name: "Strategy_Card",
  props: ["cardInfo"],
  data() {
    return {};
  },
  mounted() {
    this.createEchart();
  },
  methods: {
    createEchart() {
      var myChart = echarts.init(this.$refs.echart);
      var option = {
        tooltip: { // 设置提示框，跟随鼠标移动显示收益。
          trigger: "axis",
          position: function(pt) {
            return [pt[0], pt[1]];
          }
        },
        legend: { // 图例
          x: "left",
          y: 10,
          padding: 10,
          itemGap: 10,
          data: ["策略收益", "基准收益"]
        },
        xAxis: {// x、y轴分别为日期以及收益率，数据由父组件提供
          type: "category",
          boundaryGap: false,
          data: this.cardInfo.date
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"]
        },
        dataZoom: // 数据缩放控件
        [
          {
            
            type: "inside",
            start: 0,
            end: 90
          },
          {
            start: 0,
            end: 10,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [ // 图表类型为平滑线型，展示策略收益以及基准收益两条曲线
          {
            name: "策略收益",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(69, 114, 167)"
            },
            areaStyle: { // 下方覆盖区域设置渐变色，同样数据序列由父组件提供（this.cardInfo）
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(188, 197, 207)"
                },
                {
                  offset: 1,
                  color: "rgb(180, 190, 200)"
                }
              ])
            },
            data: this.cardInfo.strategyIncome
          },
          {
            name: "基准收益",
            type: "line",
            smooth: true,
            symbol: "none",
            sampling: "average",
            itemStyle: {
              color: "rgb(255, 90, 90)"
            },
            data: this.cardInfo.baseIncome
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.Strategy_Card {
  max-width: 380px;
  max-height: 530px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  font-size: 1em;
  background-color: #fff;
  box-shadow: 0px 0px 10px 1px #dfdfdf;
}
.name {
  width: 100%;
  font-size: 1.3em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart {
  width: 100%;
  height: 220px;
  margin-top: 10px;
}
.detail {
  width: 100%;
  height: 90px;
  box-sizing: border-box;
  padding: 20px 0px;
  list-style-type: none;
  border-bottom: 1px solid #e0ccd0;
}
.detail li {
  float: left;
  height: 40px;
  width: 33%;
  text-align: center;
}
.detail li:nth-child(1),
.detail li:nth-child(2) {
  border-right: 1px solid #303030;
}
.detail li p:first-child {
  font-size: 12px;
  color: #51676d;
}
.detail li p + p {
  font-size: 16px;
  font-weight: bolder;
  color: #464646;
}
.footer {
  width: 100%;
  height: 40px;
  margin-top: 10px;
}
.footer p {
  float: left;
  line-height: 40px;
}
.footer p span {
  font-size: 18px;
  font-weight: bolder;
  color: #000;
}
.footer .el-button {
  float: right;
  margin-top: 3px;
}
.red {
  color: rgb(251, 65, 69);
}
</style>
